<style>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-breadcrumb {
		padding: 10px 15px 0;
	}
	
	.layout-content {
		min-height: 200px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
	}
	
	.layout-content-main {
		padding: 10px;
		height: 600px;
	}
	
	.layout-copy {
		text-align: center;
		padding: 10px 0 20px;
		color: #9ea7b4;
	}
	
	.layout-menu-left {
		background: #464c5b;
	}
	
	.layout-header {
		height: 60px;
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	}
	
	.layout-logo-left {
		width: 90%;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		margin: 15px auto;
		line-height: 30px;
	}
	
	.layout-ceiling-main a {
		color: #9ba7b5;
	}
	
	.layout-hide-text .layout-text {
		display: none;
	}
	
	.ivu-col {
		transition: width .2s ease-in-out;
	}
	
	.f-r {
		float: right;
	}
	
	.ivu-table {
		font-size: 14px !important;
	}
	
	body {
		font-size: 14px !important;
	}
	
	.menu-div {
		padding: 14px 24px;
	}
	
	.title-font {
		color: #FFFFFF;
		font-size: 16px;
		text-align: center;
		vertical-align: middle;
	}
	
	.mr-10 {
		margin-right: 10px;
	}
</style>
<template>
	<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
		<Row type="flex">
			<i-col :span="spanLeft" class="layout-menu-left">
				<Menu active-name="1" theme="dark" width="auto">
					<div class="layout-logo-left">
						<p class="title-font">Tour-Laid</p>
					</div>
					<Menu-item name="1" style="padding: 0;">
						<div class="menu-div" @click="router('/tld/index/goods')">
							<Icon type="ios-navigate" :size="iconSize"></Icon>
							<span class="layout-text">&nbsp;商品管理</span>
						</div>
					</Menu-item>
					<Menu-item name="2" style="padding: 0;">
						<div class="menu-div" @click="router('/tld/index/supplier')">
							<Icon type="ios-keypad" :size="iconSize"></Icon>
							<span class="layout-text">&nbsp;供应商管理</span>
						</div>
					</Menu-item>
					<Menu-item name="3" style="padding: 0;">
						<div class="menu-div" @click="router('/tld/index/shop')">
							<Icon type="ios-analytics" :size="iconSize"></Icon>
							<span class="layout-text">&nbsp;门店管理</span>
						</div>
					</Menu-item>
					<Menu-item name="4" style="padding: 0;">
						<div class="menu-div" @click="router('/tld/index/stockIn')">
							<Icon type="ios-analytics" :size="iconSize"></Icon>
							<span class="layout-text">&nbsp;入库单管理</span>
						</div>
					</Menu-item>
					<Menu-item name="5" style="padding: 0;">
						<div class="menu-div" @click="router('/tld/index/stockOut')">
							<Icon type="ios-analytics" :size="iconSize"></Icon>
							<span class="layout-text">&nbsp;出库单管理</span>
						</div>
					</Menu-item>
					<Menu-item name="6" style="padding: 0;">
						<div class="menu-div" @click="router('/tld/index/shopGoods')">
							<Icon type="ios-analytics" :size="iconSize"></Icon>
							<span class="layout-text">&nbsp;门店商品管理</span>
						</div>
					</Menu-item>
				</Menu>
			</i-col>
			<i-col :span="spanRight">
				<div class="layout-header">
					<i-button type="text" @click="toggleClick">
						<Icon type="navicon" size="32"></Icon>
					</i-button>
					<i-button type="text" @click="loginOut" class="f-r mr-10">
						<Icon type="android-exit" size="32"></Icon>
					</i-button>
				</div>
				<router-view></router-view>
				<div class="layout-copy">
					2011-2016 &copy; Tour-Laid
				</div>
			</i-col>
		</Row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				spanLeft: 5,
				spanRight: 19
			}
		},
		created() {
			this.load()
		},
		computed: {
			iconSize() {
				return this.spanLeft === 5 ? 14 : 24;
			}
		},
		methods: {
			load() {
				this.$router.push({
					path: '/tld/index/goods'
				});
			},
			toggleClick() {
				if(this.spanLeft === 5) {
					this.spanLeft = 2;
					this.spanRight = 22;
				} else {
					this.spanLeft = 5;
					this.spanRight = 19;
				}
			},
			loginOut() {
				let _that = this;
				window.localStorage.removeItem("userId");
				_that.$Message.success({
					content: '退出成功',
					onClose: function() {
						_that.$router.push({
							path: '/tld/login'
						});
					}
				});

			},
			router(val) {
				this.$router.push({
					path: val
				});
			}
		}
	}
</script>